<template>
    <section class="jie_kou_form">
  		<el-form ref="form" :model="jiekouForm" label-width="106px" class="second_form">
    				  <el-form-item label="接口地址">
					    <el-input v-model="form.inServiceDataSource.url"></el-input>
					  </el-form-item>
					  
						<el-form-item label="接口协议" >
					    	<el-radio-group v-model="form.inServiceDataSource.protocalType">
						      <el-radio-button class="box-radio" label="http">Restful</el-radio-button>
						      <el-radio-button class="box-radio" label="soap2">Soap</el-radio-button>
						    </el-radio-group>
						    <el-button type="primary" style="float: right;">上传附件</el-button>
		    			</el-form-item>
		    			
		    			<el-form-item label="传输方法">
					    	<el-radio-group v-model="form.inServiceDataSource.requestMethod">
						      <el-radio-button class="box-radio" label="get">Get</el-radio-button>
						      <el-radio-button class="box-radio" label="post">Post</el-radio-button>
						    </el-radio-group>
		    			</el-form-item>
		    			
		    			<el-form-item label="传递方式">
					    	<el-radio-group v-model="form.inServiceDataSource.requestDataType">
						      <el-radio-button class="box-radio" label="path">PathParam</el-radio-button>
						      <el-radio-button class="box-radio" label="body">RequestBody</el-radio-button>
						      <el-radio-button class="box-radio" label="param">QueryParam</el-radio-button>
						    </el-radio-group>
		    			</el-form-item>
		    			
		    			
		    			<!--********************************************form1-->
		    			<el-form-item label="请求参数" style="margin-bottom: 0;"></el-form-item>
						<el-table
						      :data="jiekouFormTable1Data"
						      style="width: 100%;">
						       <!--以后优化，可以整成组件-->
						      <el-table-column
						       	align="center"
						       	label="参数名"
						       	>
						      <template slot-scope="scope">
						      	  <el-input v-model="scope.row.canshuName"></el-input>
						      </template>
						       </el-table-column>
						       
						        <el-table-column
						       	align="center"
						       	label="中文名"
						       	>
						      <template slot-scope="scope">
						      	  <el-input v-model="scope.row.chineseName"></el-input>
						      </template>
						       </el-table-column>
						       
						      <el-table-column
						       	align="center"
						       	label="对应的元数据"
						       	>
						      <template slot-scope="scope">
						      		<el-select v-model="scope.row.yuanData" placeholder="请选择" style="width: 100px;">
									    <el-option
									      v-for="item in wenjianFormYuanDataOptions"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id">
									    </el-option>
									</el-select>
									<i class="el-icon-circle-plus-outline" style="width: 10px;font-size: 18px;"></i>
						      </template>
						       </el-table-column>
						       
						      <el-table-column
						       	align="center"
						       	label="是否必填"
						       	>
						      <template slot-scope="scope">
						      		<el-switch  v-model="scope.row.ishas"></el-switch>
						      </template>
						       </el-table-column>
						       
						       <el-table-column
						       	align="center"
						       	label="是否校验"
						       	>
						      <template slot-scope="scope">
						      		<el-switch  v-model="scope.row.ischeck"></el-switch>
						      </template>
						       </el-table-column>
						       
						       <el-table-column
						       	align="center"
						       	label=""
						       	>
						      <template slot-scope="scope">
						      	<i class="el-icon-delete"></i>
						      </template>
						       </el-table-column>
						 </el-table>
						 
						 <el-button type="primary" class="add_button" @click="addjiekouFormTable1Data">添加</el-button>
						 
						<!--********************************************form2-->
						<el-form-item label="返回数据" style="margin-bottom: 0;"></el-form-item>
						<el-table
						      :data="jiekouFormTable2Data"
						      style="width: 100%;">
						       
						      <el-table-column
						       	align="center"
						       	label="参数名"
						       	>
						      <template slot-scope="scope">
						      	  <el-input v-model="scope.row.canshuName"></el-input>
						      </template>
						       </el-table-column>
						       
						        <el-table-column
						       	align="center"
						       	label="中文名"
						       	>
						      <template slot-scope="scope">
						      	  <el-input v-model="scope.row.chineseName"></el-input>
						      </template>
						       </el-table-column>
						       
						      <el-table-column
						       	align="center"
						       	label="对应的元数据"
						       	>
						      <template slot-scope="scope">
						      		<el-select v-model="scope.row.yuanData" placeholder="请选择" style="width: 160px;">
									    <el-option
									      v-for="item in wenjianFormYuanDataOptions"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id">
									    </el-option>
									</el-select>
									<i class="el-icon-circle-plus-outline" style="width: 10px;font-size: 18px;"></i>
						      </template>
						       </el-table-column>
						       
						       <el-table-column
						       	align="center"
						       	label=""
						       	>
						      <template slot-scope="scope">
						      	<i class="el-icon-delete"></i>
						      </template>
						       </el-table-column>
						       
						 </el-table>
						 <el-button type="primary" class="add_button" @click="addjiekouFormTable2Data">添加</el-button>
    			</el-form>
    			
    						
        
    </section>
</template>

<script>
    import {
    	componentGetYuanData2Type,
    } from "../../common/js_css_img/serverResourceComputed"
    export default {
    	props:{
    		timeSubmit :Boolean,
    	},
        data() {
          return {
          		jiekouForm:{
          			jiekouXieyi:'',
          			chuanshuMethods:'',
          			chuandiMethods:'',
          		},
          		form:{
	          		inServiceDataSource:{  //数据来源
						"type":1 //实时接口类型2;//文件类型3;//数据库类型
						,"url":""  //接口地址
						,"protocalType":"",  //接口协议
						"requestDataType":"",//传递方式
						'requestMethod':'',  //传输方法
						"outputDataFormList":[ //数据匹配
							
						]
					},
					outServiceDataSourceList:[//返回接口/返回文件
					{
						"type":"1", //返回接口2;//返回文件（注意，当数据来源是接口时这个type也要传，传1）
						"filePath" :''
						,"inputDataFormList":[ //请求参数  
							
						]
					},
				],
          		},
          		jiekouFormTable1Data:[
	          		{
	          			canshuName :'',
	          			chineseName:"",
	          			yuanData:'',
	          			ishas:"",
	          			ischeck:"",
	          		},
          		],
          		jiekouFormTable2Data:[
	          		{
	          			canshuName :'',
	          			chineseName:"",
	          			yuanData:'',
	          		},
          		],
          		jiekouFormTableLabel:{
          			canshuName :'参数名',
          			chineseName:"中文名",
          			yuanData:'对应的元数据',
          			ishas:"是否必填",
          			ischeck:"是否校验",
          		},
          		jiekouFormYuanData:'',/*对应元数据*/
          		wenjianFormYuanDataOptions:[/*对应元数据*/
          		],
          		
          };
        },
        methods: {
        	addjiekouFormTable1Data(){/*第一个表单添加行*/
        		this.jiekouFormTable1Data.push(
        			{
	          			canshuName :'',
	          			chineseName:"",
	          			yuanData:'',
	          			ishas:"",
	          			ischeck:"",
	          		}
        		)
        	},
        	addjiekouFormTable2Data(){/*第二个表单添加行*/
        		this.jiekouFormTable2Data.push(
        			{
	          			canshuName :'',
	          			chineseName:"",
	          			yuanData:'',
	          		},
        		)
        	}
        },
        mounted(){
        	componentGetYuanData2Type(this,{},2);/*获取共享返回类的元数据*/
        },
        watch:{
        	timeSubmit(newVal){
        		console.log(this.jiekouFormTable1Data)
        		console.log(this.form);
        		for(let i in this.jiekouFormTable1Data){
        			this.form.outServiceDataSourceList[0].inputDataFormList.push(
        				{
        					"key":this.jiekouFormTable1Data[i].canshuName
							,"name":this.jiekouFormTable1Data[i].chineseName
							,"metaDataId":this.jiekouFormTable1Data[i].yuanData
							,"position":i
							,"isValid":this.jiekouFormTable1Data[i].isCheck===""?0:1
							,"isNecessary":this.jiekouFormTable1Data[i].isHas===""?0:1
        				}
        			)
        		}
        		for(let v in this.jiekouFormTable2Data){
        			this.form.inServiceDataSource.outputDataFormList.push(
        				{
        					"key":this.jiekouFormTable2Data[v].canshuName
        					,"name":this.jiekouFormTable2Data[v].chineseName
        					,"position":v
        					,"metaDataId":this.jiekouFormTable2Data[v].yuanData
        				}
        			)
        		}
        		console.log(this.form);
        		this.$emit("outPutForm",this.form);
        	}
        }
  };
</script>

<style>
    .jie_kou_form  .add_button{
    	margin-top: 15px;
    }
	.jie_kou_form .el-table{
		background-color: unset;
	}
	.jie_kou_form .el-table tr{
		background-color: unset;
	}
	.jie_kou_form .el-table thead{
		background-color: #e9eef8;
	}
</style>